import React from 'react';
import {Input, Icon} from 'antd';
const InputGroup = Input.Group;
export default class MenuBar extends React.Component {
    state = {focus: false, fold: this.props.fold}
    handleInputChange = () => {

    }

    handleFold = () => {
        const fold = !this.state.fold;
        this.setState({fold});
        if (this.props.onState) {
            this.props.onState('menufold', fold);
        }
    }

    render() {
        const {placeholder = '快速检索菜单'} = this.props;
        const fold = this.state.fold;
        return (
            <InputGroup className="menuBar">
                <Input
                    style={fold ? {display: 'none'} : {}}
                    placeholder={placeholder}
                    value={this.state.value}
                    onChange={this.handleInputChange}
                />
                <div className="ant-input-group-wrap">
                    <Icon
                        className="menu-fold" title={this.state.fold ? '展开' : '折叠'}
                        type={this.state.fold ? 'menu-unfold' : 'menu-fold'} onClick={this.handleFold}
                    />
                </div>
            </InputGroup>
        );
    }
}

